{% extends 'admin/base.html' %}
{% load custom_filters staticfiles %}
{% block content %}
    <style>
        .cell {
            text-align: center;
        }

        div[class="el-input"] {
            width: 220px;
        }
    </style>
    <div id="app">
        <template>
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column label="来访IP" prop="ip"></el-table-column>
                <el-table-column label="访问次数" prop="visit"></el-table-column>
                <el-table-column label="初次访问" prop="time"></el-table-column>
                <el-table-column label="最新访问" prop="first_time"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">冻结</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <br/>

        <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page @current-change="current_change" :current-page="currentPage" style="text-align: right;"></el-pagination>

    </div>
    <script src="{% static 'js/public.js' %}" type="text/javascript"></script>
    <script>
        var Main = {
            data() {
                return {
                    total: {{ page.pages }}0,
                    currentPage: {{ page.current|default:1 }},
                    tableData: [
                        {% for data in dataList %}
                            {
                                ip: '{{ data.ip }}',
                                uuid: '{{ data.ip }}',
                                visit: '{{ data.visit }}',
                                first_time: '{{ data.first_time|time_str }}',
                                time: '{{ data.time|time_str }}',
                            },
                        {% endfor %}
                    ],
                    formLabelWidth: '120px',
                }
            }
            , methods: {
                handleDelete: function (index, row) {
                    Delete(this, index, row);
                },
                current_change: function (currentPage) {
                    window.location.href = '?page=' + currentPage;
                }, handleEdit: function (index, row) {
                    submit_ajax(this,'POST',{'ip':row.ip})
                }
            }
        };
        var Ctor = Vue.extend(Main);
        new Ctor().$mount('#app');
    </script>
{% endblock %}